<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.border {
				width: 300px;
				height: 300px;
				background-color: hotpink;
				border-width: 10px;
				border-style: solid;
				border-color: yellow;
				border-bottom: 4px dotted green;
				border-collapse: collapse;
				/* border三属性 宽度width 样式style 颜色color */
				/* border的style三个常用属性 solid实线 dashed虚线 dotted点线 */
				/* border: 5px dashed skyblue; 简写没有顺序讲究*/
				/* 四条边框可以分别给样式 合理利用层叠性可以快速单独给某条边样式 */
				/* collapse属性值用于合并相邻盒子边框，主要用在表格td里 */
			}
			.padding {
				width: 200px;
				height: 200px;
				background-color: hotpink;
				padding-top:20px;
				padding-right:20px;
				padding-bottom:20px;
				padding-left:20px;
				/* padding:5px 表示上下左右都是5px */
				/* padding:5px 10px 表示上下5px 左右10px */
				/* padding:5px 10px 20px 表示上5px 左右10px 下20px */
				/* padding:5px 10px 20px 30px 表示上右下左分别为5px 10px 20px 30px 顺时针 */
			}
			.margine {
				background-color: hotpink;
				width: 400px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<h1>css的盒子模型,从外到里依次是margine border padding content</h1>
		<div class="border">border测试</div>
		<h1>边框会影响盒子实际大小</h1>
		<br>
		<br>
		<br>
		<div class="padding">
			盒子内容content盒子内容content盒子内容content盒子内容content盒子内容content盒子内容content
		</div>
		<h1>padding会影响盒子实际大小,特殊情况孩子和父亲一样宽不指定宽度时,padding不会撑开盒子</h1>
		<h1>margine跟padding的简写完全一致，margine表示盒子跟盒子的距离</h1>
		<div class="margine">
			marigine外边距的经典应用之使块级元素水平居中
		</div>
		<h1>使块级元素水平居中必须满足：1.设置了宽度width  2.设置了margine左右外边距都为auto</h1>
		<h1>行内或行内块元素要水平居中则要给它的父元素设置text-align：center</h1>
		
		
	</body>
</html>
